<!-- 个人中心 -->
<template>
	<view>
		<navigator url="/pages/choujiang/choujiang">
			<view class="jiang">
				<image src="/static/image/jiang.png" mode=""></image>
			</view>
		</navigator>
		
		<view class="top">
			<view class="title_msg">
				<!-- 登陆后显示 -->
				<navigator v-if="code==1"
					:url="'/pages/c-userinfo/c-userinfo?id='+userInfo.userId+'&name='+userInfo.nickName+'&psw='+userInfo.passWord">
					<view class="user_img">
						<view class="headportrait">
							<image style="width: 100%; height: 100%;"
								src="../../static/image/img_wode_gerentouxiang@2x.png" mode=""></image>
						</view>
						<text style="font-size: 30rpx;"
							v-if="userInfo.userId != undefined">欢迎{{userInfo.nickName}}</text>
						<text v-else style="font-size: 30rpx;">未登录，点击登陆</text>
					</view>
				</navigator>
				<!-- 未登录显示 -->
				<view v-else class="user_img">
					<view style="background-color:#303133;" class="headportrait">

					</view>
					<navigator url="/pages/Login/Login">
						<text style="font-size: 30rpx;">未登录,点击登陆</text>
					</navigator>

				</view>

				<navigator url="/pages/index/index">
					<view class="icon1">
						<image style="width: 100%; height: 100%;" src="../../static/image/icon_home_lianxiankuang.png"
							mode=""></image>
					</view>
				</navigator>

			</view>
			<!-- <view class="more">
				<text class="txt">已实名</text>
			</view> -->
			<navigator url="/pages/Borrow/Card">
				<view class="more">
					<text class="txt">为了资金安全,请尽快完成实名认证,以享受更多服务></text>
				</view>
			</navigator>

			<view class="money">
				<view class="item">
					<text v-if="userInfo.userId != undefined" class="txt1">{{userInfo.balance}}</text>
					<text v-else class="txt1">***</text>
					<text class="txt2">钱包余额</text>
					<view class="border"></view>
				</view>
				<navigator url="../bankcard/bankcard">
					<view class="item">
						<text class="txt1">***张</text>
						<text class="txt2">银行卡</text>
						<view class="border"></view>
					</view>
				</navigator>
				<view class="item">
					<text class="txt1">***</text>
					<text class="txt2">优惠券</text>
				</view>
			</view>

		</view>
		<view class="my_money">
			<u-toast ref="uToast" />
			<navigator @click="gototalmoney" url="">
				<view class="title">
					<text>我的资产</text>
					<image style="width: 50rpx;height:50rpx;" src="/static/image/icon_wodezichan_chakan.png" mode="">
					</image>
				</view>
			</navigator>

			<view class="money">
				<view class="item">
					<text style="margin-bottom: 20rpx;" class="txt1">总资产</text>
					<text class="txt2">{{userInfo.userTotalMoney}}</text>
					<!-- <text class="txt2">***</text> -->
				</view>

				<view class="item">
					<text style="margin-bottom: 20rpx;" class="txt1">总账单</text>
					<text class="txt2">***</text>
				</view>

			</view>
			<view class="integral">
				<view class="item">
					<text class="txt1">我的额度</text>
					<text class="txt2">***</text>
				</view>
				<navigator url="/pages/buyin/buyin">
					<view class="item">
						<text class="txt1">我的保单</text>
						<text class="txt2">***张</text>
					</view>
				</navigator>

				<navigator url="/pages/Borrow/Record">
					<view class="item">
						<text class="txt1">借还记录</text>
						<text class="txt2">***项</text>
					</view>
				</navigator>

				<view class="item">
					<text class="txt1">剩余积分</text>
					<text class="txt2">****</text>
				</view>
			</view>
		</view>

		<view class="serve">
			<image style="width: 50rpx; height: 50rpx;" src="/static/image/icon_wode_anquanfuwu.png" mode=""></image>
			<text>安全服务</text>
		</view>
		<view class="serve">
			<image style="width: 50rpx; height: 50rpx;" src="/static/image/icon_wode_yaoqinghaoyou.png" mode=""></image>
			<text>邀请好友</text>
		</view>
		<view class="serve">
			<image style="width: 50rpx; height: 50rpx;" src="/static/image/icon_wode_lianxikefu.png" mode=""></image>
			<text>联系客服</text>
		</view>
		<view class="serve">
			<image style="width: 50rpx; height: 50rpx;" src="/static/image/icon_wode_geiwomenhaoping.png" mode="">
			</image>
			<text>给我们好评</text>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers(
		"user"
	);
	export default {
		data() {
			return {
				code: '',
			}
		},
		async onShow() {
			let result = await this.getToken()
			let res2 = await this.getId()
			let res3 = await this.getUserById({
				userId: res2.data
			})

			console.log(this.userInfo);
			

		

			this.code = result.code
		},

		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapActions(['getToken', 'getUserById', 'getId']),
			async gototalmoney() {
				//判断也没有token
				let result = await this.getToken()
				if (result.code == 0) {
					this.$refs.uToast.show({
						title: '请先登录',
						type: 'error',
						url: '/pages/user/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/totalmoney/totalmoney?userId=' + this.userInfo.userId
					})
				}

			}
		}
	}
</script>
t
<style scoped lang="scss">
	.top {
		background: url('../../static/image/img_bg_wode.png') no-repeat;
		background-size: cover;
		width: 750rpx;
		height: 336rpx;

		.title_msg {
			margin: 0 auto;
			width: 644rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user_img {
				width: 400rpx;
				height: 120rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-top: 10rpx;

				.headportrait {
					width: 125rpx;
					height: 125rpx;
					border-radius: 50%;
				}

				text {
					margin-left: 30rpx;
					color: #FFFFFF;
					font-size: 40rpx;
					font-weight: 700;
				}

			}

			.icon1 {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.more {
			margin: 60rpx auto;
			width: 626rpx;
			height: 58rpx;
			background-color: #f2f7ff;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(225, 225, 225, 0.2);
			border-radius: 8rpx;
			opacity: 0.68;
			text-align: center;
			line-height: 58rpx;

			.txt {
				width: 586rpx;
				height: 34rpx;
				font-family: PingFang SC;
				font-size: 24rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 34rpx;
				letter-spacing: 0rpx;
				color: #1380ff;
			}
		}

		.money {
			margin: -20rpx auto;
			width: 670rpx;
			height: 130rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(225, 225, 225, 0.2);
			border-radius: 12rpx;
			display: flex;
			justify-content: space-around;

			.item {
				width: 215rpx;
				height: 118rpx;
				background-color: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(225, 225, 225, 0.2);
				border-radius: 12rpx;
				text-align: center;

				// position: relative;
				.border {
					position: absolute;
					right: 0rpx;
					top: 40rpx;
					width: 2rpx;
					height: 50rpx;
					background-color: #909399;
				}

				.txt1 {
					margin-top: 10rpx;
					font-family: DIN;
					font-size: 32rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 40rpx;
					letter-spacing: 0rpx;
					color: #2a2d32;
					display: block;

				}

				.txt2 {
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 34rpx;
					letter-spacing: 0rpx;
					color: #2e3033;
					display: block;
					margin-top: 15rpx;
				}
			}
		}
	}

	// 我的资产
	.my_money {
		margin: 80rpx auto;
		width: 622rpx;

		.title {
			text {
				padding-top: 20rpx;
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 40rpx;
				letter-spacing: 0rpx;
				color: #2a2d32;
			}

			image {
				margin-left: 30rpx;
				vertical-align: middle;
			}
		}

		.money {
			width: auto;
			height: 130rpx;
			border-bottom: 1px solid #F1F1F1;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			padding-bottom: 90rpx;

			.txt2 {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				font-family: DIN;
				font-size: 32rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 40rpx;
				letter-spacing: 0rpx;
				color: #e74d45;
				display: block;
			}

			.txt1 {
				font-family: PingFang SC;
				font-size: 24rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 34rpx;
				letter-spacing: 0rpx;
				color: #2e3033;
			}

		}

		.integral {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;

			.item {
				width: 112rpx;
				height: 80rpx;
				text-align: center;

				.txt1 {
					margin-top: 20rpx;
					display: block;
					font-family: PingFang SC;
					font-size: 28rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 40rpx;
					letter-spacing: 0rpx;
					color: #2e3033;
				}

				.txt2 {
					font-family: DIN;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 30rpx;
					letter-spacing: 0rpx;
					color: #cccccc;
				}
			}
		}
	}

	// 服务
	.serve {
		margin: 0 auto;
		width: 622rpx;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #ffffff;
		border-bottom: solid 2rpx #e4e4e4;

		image {
			vertical-align: middle;
			margin-right: 20rpx;
		}
	}

	.jiang {
		width: 78rpx;
		height: 85rpx;
		position: fixed;
		right: 50rpx;
		bottom: 100rpx;
		animation-name: fac;
		animation-duration: .6s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-fill-mode: both;
		animation-direction: alternate;

		@keyframes fac {
			0% {

				transform: rotate(30deg) scale(.5);
			}
			50% {
			
				transform: rotate(-30deg) scale(1);
			}
			100% {
				transform: rotate(30deg) scale(.5);

			}
		}

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
